import {Menu, MenuProps} from "antd";
import React, {useState} from "react";
import {FileOutlined, TeamOutlined, UserOutlined} from "@ant-design/icons";
import {useNavigate, useLocation} from "react-router-dom";

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

// const items: MenuItem[] = [
//     getItem('博客管理', 'blog', <UserOutlined />, [
//         getItem('博客列表', '/blog-list'),
//         getItem('发布博客', '/blog-add'),
//     ]),
//     getItem('用户管理', 'user', <TeamOutlined />, [
//         getItem('用户列表', '/user-list'),
//         getItem('角色管理', '/role-manage')
//     ]),
//     getItem('文件管理', '9', <FileOutlined />),
// ];


const items = [
    {
        key: 'blog',
        label: '博客管理',
        icon: <UserOutlined />,
        children: [
            {
                key: '/blog-list',
                label: '博客列表',
            },
            {
                key: '/blog-add',
                label: '发布博客',
            }
        ]
    },
    {
        key: 'user',
        label: '用户管理',
        icon: <TeamOutlined />,
        children: [
            {
                key: '/user-list',
                label: '用户列表',
            },
            {
                key: '/role-manage',
                label: '角色管理',
            }
        ]
    },
    {
        key: 'file',
        label: '文件管理',
        icon: <FileOutlined />,
        children: [
            {
                key: '/file-list',
                label: '文件列表',
            },
        ]
    },
    {
        key: 'study',
        label: '练习',
        icon: <UserOutlined />,
        children: [
            {
                key: '/study',
                label: '组件通信',
            },
            {
                key: '/redux',
                label: 'redux',
            },
        ]
    },
]

const Comp: React.FC = () => {
    const navigateTo = useNavigate()
    const currentRoute = useLocation()

    // 页面刷新时打开的节点,通过currentRoute.pathname去做对比，比如通过user-list找到它的上级user
    let firstOpenKeys: string = ''

    // obj: {key: string} 表示：obj 是函数的一个参数, obj是一个对象, 这个对象应该有一个属性 key, 类型应该是 string
    function findKey(obj: {key: string, label: string}) {
        return obj.key === currentRoute.pathname
    }

    for (let i = 0; i < items.length; i++) {
        if (items[i]['children'] && items[i]['children'].length > 0 && items[i]['children'].find(findKey)) {
        // if (items[i]['children'] && items[i]['children'].length > 0 && items[i]['children'].find(item => {return item.key === currentRoute.pathname})) {
            firstOpenKeys = items[i].key;
            break;
        }
    }

    // 菜单点击事件,形参e.key就是MenuItem中的key值
    const menuClick = (e: {key: string}) => {
        // console.log(e.key)
        // 编程式导航，利用hook
        navigateTo(e.key)
    }

    // 展开的菜单节点
    const [openKeys, setOpenKeys] = useState([firstOpenKeys]);

    // 处理菜单只展开一项
    const handleOpenChange = (keys: string[]) => {
        setOpenKeys([keys[keys.length - 1]])
    }

    return (
        <Menu
            theme="dark"
            // 当前选中项的样式
            defaultSelectedKeys={[currentRoute.pathname]}
            mode="inline"
            items={items}
            onClick={menuClick}
            // 菜单展开和回收事件
            onOpenChange={handleOpenChange}
            // 当前菜单展开项的key数组
            openKeys={openKeys}
        />
    )
}

export default Comp;